<!--
 * @Author: zhangfan
 * @Date: 2024-06-25 18:36:08
 * @LastEditors: ***
 * @LastEditTime: 2024-06-26 13:51:17
 * @Description: 11
 * @FilePath: /demo/src/views/scopedSlots/index.vue
-->
<template>
  <div class="parent">
    <div class="view-contain-box">
      <child-one :tableData="tableData">
        <!-- 无论怎么修改，页面显示的列表项都是一样的，因为我们的default插槽是一样的。 -->
        <!-- <span>{{tableData[0].name}} ===> vm.$slots的使用</span> -->
        <span slot-scope="scope">{{scope.name}}  ===> vm.scopedSlots的使用</span>
      </child-one>
    </div>
  </div>
</template>
<script>
import ChildOne from './components/child-one.vue'
export default {
  components: {
    ChildOne
  },
  data () {
    return {
      tableData: [
        { name: 111 },
        { name: 222 },
        { name: 333 }
      ]
    }
  },
  methods: {
  }
}
</script>
<style scoped>
.parent {
  border: 1px solid #ccc;
  padding: 50px;
}
.view-contain-box {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 20px;
}
.operate {
  cursor: pointer;
}
</style>
